import { observer } from 'mobx-react'
import store from '../../store'
import styles from './index.module.less'
import hand from '@/resource/archives/hand.png'

const FiveFinger = () => {
    const { fileDetail } = store || {}

    return (
        <div className={styles.container}>
            <div className={styles.content_wrapper}>
                <img src={hand} />
                {fileDetail?.detail?.map((item: any, idx: number) => {
                    return (
                        <div className={styles.box} key={item.id}>
                            <div className={styles.number}>{idx + 1}</div>
                            <div className={styles.right_content}>
                                <div className={styles.title}>{item.name}</div>
                                <div className={styles.reason}>{item.feature}</div>
                            </div>
                        </div>
                    )
                })}
            </div>
        </div>
    )
}

export default observer(FiveFinger)
